import Style from './index.css';
import React, { useState } from 'react';
import { message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { history } from 'umi';
import Cookie from '../../Control/cookie';
import Crypt from '../../Control/crypt';
import backgroundImg from '../../assets/img/Login.png';
import { userLogin } from '../../api/request';

function Login() {
  const [userAccount, setUserAccount] = useState('18979307261');
  const [userPwd, setUserPwd] = useState('zhhdzs129');
  const authTokenKey = 'cmbCampus0722000';
  const authTokenIv = '';

  const changeUserAccount = (e) => {
    setUserAccount(e.target.value);
  };

  const changeUserPwd = (e) => {
    setUserPwd(e.target.value);
  };

  const onLogin = (e) => {
    e.preventDefault();
    userLogin({
      userAccount: userAccount,
      userPwd: Crypt.Encrypt(userPwd, authTokenKey, authTokenIv),
    })
      .then((res) => {
        if (res.data.code == 200) {
          message.success('登录成功！');
          Cookie.set('headPortrait', res.data.data.headPortrait);
          Cookie.set('isAdmin', res.data.data.isAdmin);
          Cookie.set('userAccount', res.data.data.userAccount);
          Cookie.set('userId', res.data.data.userId);
          Cookie.set('userName', res.data.data.userName);
          Cookie.set('userPhone', res.data.data.userPhone);
          history.push('/index');
        } else {
          message.error(res.data.message);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };

  return (
    <div className={Style.login}>
      <img src={backgroundImg} className={Style.backgroundImg} />
      <form className={Style.loginForm} onSubmit={onLogin}>
        <ul>
          <li className={Style.formTitle}>秦学后台管理</li>
          <li className={Style.formInput}>
            <UserOutlined className={Style.formIcon} />
            <input
              type="text"
              placeholder="请输入账号"
              value={userAccount}
              onChange={changeUserAccount}
            />
          </li>
          <li className={Style.formInput}>
            <LockOutlined className={Style.formIcon} />
            <input
              type="password"
              placeholder="请输入登录密码"
              value={userPwd}
              onChange={changeUserPwd}
            />
          </li>
          <li>
            <input type="submit" className={Style.submitBtn} value="登录" />
            <p className={Style.tips}>使用手机小程序提示的账号密码登录</p>
          </li>
        </ul>
      </form>
    </div>
  );
}

export default Login;
